<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增单位用工管理')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-select-css" />
    <style type="text/css">
        .user-info-head{
            position:relative;display:inline-block;
            width: 100%;
            height: 100%;
        }
        .user-info-head:hover:after
        {
            content:'\f030';
            position:absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            color:#eee;
            background:rgba(0,0,0,0.2);
            font-family:FontAwesome;
            font-size:24px;
            font-style:normal;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
            cursor:pointer;line-height:150px;
        }
    </style>
</head>
<style>
    .jltable{
        margin: auto;
    }
    .jltable th,td{
        min-height: 40px;
        min-width: 50px;
        border: 1px solid #eee;
        padding: 10px;
    }
    .avatar-container{
        cursor: pointer;
        width: 150px;
        height: 150px;
        position: relative;
    }
</style>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-yggl-add">
            <h4 class="form-header h4">基本信息</h4>

            <table class="jltable">
                <tbody>
                    <tr>
                        <td>  <label class="control-label is-required">姓名：</label> </td>
                        <td>
                            <input  name="name" class="form-control"  required type="hidden">
                            <select  class="form-control" id="name_select"></select>
                        </td>
                        <td style="width: 110px"></td><td></td>
                        <td colspan="2" rowspan="3">
                            <div  class="avatar-container text-center">
                                <input  type="hidden" name="avatar">
                                <p class="user-info-head" onclick="avatar()">
                                    <img id="avatarImg" style="width: 100%;height: 100%" src=""
                                         th:onerror="'this.src=\'' + @{'/img/profile.jpg'} + '\''"/>
                                </p>
                                <p><a href="javascript:avatar()"></a></p>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="height: 50px">   <label class="control-label is-required">身份证：</label> </td>
                        <td>  <input name="sfzh" class="form-control" type="text" required maxlength="18"> </td>
                        <td style="width: 110px"></td>
                        <td>照片</td>
                    </tr>
                    <tr>
                        <td> <label class="control-label">部门：</label></td>
                        <td>  <input name="bm" class="form-control" type="text"></td>
                        <td style="width: 110px"></td>
                    </tr>
                    <tr>
                        <td>  <label class="control-label">员工职位：</label></td>
                        <td>    <input name="zw" class="form-control" type="text"></td>
                        <td style="width: 110px"></td>
                        <td> <label class="control-label">员工分类：</label></td>
                        <td>
                            <select name="fl" class="form-control noselect2 selectpicker" th:with="type=${@dict.getType('lwpq_ygfl')}">
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </td>
                    </tr>
                </tbody>
            </table>

            <h4 style="margin-top: 30px" class="form-header h4">人员信息状态</h4>
            <table class="jltable">
                <tbody>
                    <tr>
                        <td>  <label class="control-label">状态：</label></td>
                        <td>
                            <select name="zt" class="form-control noselect2 selectpicker" th:with="type=${@dict.getType('lwpq_yg_zt')}">
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </td>
                        <td> <label class="control-label">派遣单位：</label></td>
                        <td>  <input name="pqdw" class="form-control" type="text"></td>
                    </tr>
                    <tr>
                        <td> <label class="control-label">试用期：</label></td>
                        <td> <input name="syq" class="form-control" type="text"></td>
                        <td>  <label class=" control-label">入职时间：</label></td>
                        <td>
                            <div class="input-group date">
                                <input name="joinTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td> <label class="control-label">转正日期：</label></td>
                        <td>
                            <div class="input-group date">
                                <input name="zzrq" class="form-control" placeholder="yyyy-MM-dd" type="text">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </td>
                        <td> <label class="control-label">离职日期：</label></td>
                        <td>
                            <div class="input-group date">
                                <input name="lzrq" class="form-control" placeholder="yyyy-MM-dd" type="text">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

            <h4 style="margin-top: 30px" class="form-header h4">个人信息</h4>
            <table class="jltable">
                <tbody>
                    <tr>
                        <td>  <label class="control-label">性别：</label></td>
                        <td>  <select id="sex" name="sex" class="form-control noselect2 selectpicker" th:with="type=${@dict.getType('sys_user_sex')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                        </td>
                        <td style="width: 100px"></td>
                        <td>  <label class="control-label">学历：</label></td>
                        <td style="width: 210px">   <select id="xl" name="xl" class="form-control noselect2 selectpicker" th:with="type=${@dict.getType('xueli')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option></select>
                        </td>
                    </tr>
                    <tr>
                        <td>  <label class=" control-label">籍贯：</label> </td>
                        <td> <input name="jg" class="form-control" type="text"></td>
                        <td style="width: 100px"></td>
                        <td><label class="control-label">婚姻：</label></td>
                        <td style="width: 210px">
                            <select name="hy" class="form-control noselect2 selectpicker" th:with="type=${@dict.getType('lwpq_hy')}">
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><label class="control-label">电话号码：</label></td>
                        <td>
                            <input name="phone" class="form-control" type="text" maxlength="11">
                        </td>
                        <td style="width: 100px"></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td> <label class="control-label">住址：</label></td>
                        <td>  <input name="address" class="form-control" type="text"></td>
                        <td style="width: 100px"></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>

            <h4 style="margin-top: 30px" class="form-header h4">财务工资卡信息</h4>
            <table class="jltable">
                <tbody>
                    <tr>
                        <td> <label class=" control-label">开户行：</label></td>
                        <td> <input name="khh" class="form-control" type="text"></td>
                        <td></td>
                        <td> <label class=" control-label">工资卡号：</label></td>
                        <td>  <input name="bank" class="form-control" type="text"></td>
                    </tr>
                    <tr>
                        <td> <label class="control-label">合同工资：</label></td>
                        <td> <input name="htgz" class="form-control" type="text"></td>
                        <td></td>
                        <td> <label class="control-label">基本工资：</label></td>
                        <td><input name="jbgz" class="form-control" type="text"></td>
                    </tr>
                    <tr>
                        <td> <label class="control-label">工资发放方式：</label></td>
                        <td>
                            <select name="gzfffs" class="form-control noselect2 selectpicker" th:with="type=${@dict.getType('lwpq_gzfffs')}">
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </td>
                        <td></td><td></td><td></td>
                    </tr>
                </tbody>
            </table>



            <h4 class="form-header h4" style="margin-top: 30px">工作经历信息</h4>
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus"> 增加</i></button>
                    <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table"></table>
                    </div>
                </div>
            </div>

            <h4 class="form-header h4" style="margin-top: 30px">教育经历信息</h4>
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-white btn-sm" onclick="addColumn_1()"><i class="fa fa-plus"> 增加</i></button>
                    <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table-1"></table>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: select2-js" />
    <th:block th:include="include :: bootstrap-select-js" />
    <script th:inline="javascript">
        var prefix = ctx + "lwpq/yggl"
        var idDatas = [[${@dict.getType('${column.dictType}')}]];
        var createTimeDatas = [[${@dict.getType('${column.dictType}')}]];
        var createByDatas = [[${@dict.getType('${column.dictType}')}]];
        var updateTimeDatas = [[${@dict.getType('${column.dictType}')}]];
        var updateByDatas = [[${@dict.getType('${column.dictType}')}]];
        $("#form-yggl-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-yggl-add').serialize());
            }
        }

        $("input[name='joinTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='zzrq']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='lzrq']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $(function (){
            function formatRepo(repo){
                return  repo.name || repo.text;
            }
            function formatRepoSelection(repo){
                return  repo.name || repo.text;
            }

            $('#name_select').select2({
                ajax:{
                    url: ctx + 'lwpq/jl/list',
                    type:'post',
                    dataType:'json',
                    data:function (params) {
                        let query = {
                            name:params.term,
                            zt:'',
                        }
                        return query;
                    },
                    processResults : function (data){
                        let res = new Array();
                        data.rows.forEach(value => {
                            res.push({
                                id : value.id,
                                text : value.name,
                                ob:value
                            })
                        })
                        return {
                            results : res
                        };
                    },
                    minimumInputLength : 1,
                    maximumInputLength : 20,
                    templateResult : formatRepo,
                    templateSelection : formatRepoSelection,
                }
            })
            $('#name_select').on('select2:select', function (e) {
                // 处理业务
                let ob =  e.params.data.ob;
                $("input[name='sfzh']").val(ob.sfzh);
                $("input[name='phone']").val(ob.dh);
                $("input[name='jg']").val(ob.hj);
                $("input[name='name']").val(ob.name);


                $('#sex').selectpicker('val', ob.sex);
                $('#xl').selectpicker('val', ob.xl);
                $("input[name='avatar']").val(ob.avatar);
                $("#avatarImg").attr("src", ob.avatar);

            });
        })
        //工作经历
        $(function() {
            var options = {
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                    	var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                    	return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'startTime',
                    align: 'center',
                    title: '开始时间',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input name='lwpqGzjlList[%s].startTime' value='%s' class='form-control'  type='date'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'endTime',
                    align: 'center',
                    title: '结束时间',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='date' name='lwpqGzjlList[%s].endTime' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'zw',
                    align: 'center',
                    title: '职位',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='lwpqGzjlList[%s].zw' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'dw',
                    align: 'center',
                    title: '单位名称',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='lwpqGzjlList[%s].dw' value='%s'>", index, value);
                        return html;
                    }
                }
                ]
            };
            $.table.init(options);
        });
        //教育经历
        $(function() {
            var options = {
                id:"bootstrap-table-1",
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'index',
                        align: 'center',
                        title: "序号",
                        formatter: function (value, row, index) {
                            var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                            return columnIndex + $.table.serialNumber(index);
                        }
                    },
                    {
                        field: 'startTime',
                        align: 'center',
                        title: '开始时间',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input name='lwpqJyjlList[%s].startTime' value='%s' class='form-control'  type='date'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'endTime',
                        align: 'center',
                        title: '结束时间',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='date' name='lwpqJyjlList[%s].endTime' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'zy',
                        align: 'center',
                        title: '专业',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='lwpqJyjlList[%s].zy' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'xx',
                        align: 'center',
                        title: '学校名称',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='lwpqJyjlList[%s].xx' value='%s'>", index, value);
                            return html;
                        }
                    }
                ]
            };
            $.table.init(options);
        });
        /*用户管理-头像*/
        function avatar() {
            var url = ctx + 'lwpq/yggl/avatar?url='+$("input[name='avatar']").val();
            top.layer.open({
                type: 2,
                area: [$(window).width() + 'px', $(window).height() + 'px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: "修改头像",
                content: url,
                btn: ['确定', '关闭'],
                // 弹层外区域关闭
                shadeClose: true,
                yes: function(index, layero) {
                    var iframeWin = layero.find('iframe')[0];
                    iframeWin.contentWindow.submitHandler((res)=> {
                        $("input[name='avatar']").val(res);
                        $("#avatarImg").attr("src", res);
                    });
                },
                cancel: function(index) {
                    return true;
                }
            });
        }

        function addColumn() {
            var count = $("#bootstrap-table").bootstrapTable('getData').length;
            sub.editColumn();
        	
            $("#bootstrap-table").bootstrapTable('insertRow', {
                index: count,
                row: {
                    index: $.table.serialNumber(count),
                    startTime: "",

                    endTime: "",

                    zw: "",

                    dw: "",

                    createTime: "",

                    createBy: "",

                    updateTime: "",

                    updateBy: "",

                }
            });
        }

        function addColumn_1() {
            var count = $("#bootstrap-table-1").bootstrapTable('getData').length;
            sub.editColumn();

            $("#bootstrap-table-1").bootstrapTable('insertRow', {
                index: count,
                row: {
                    index: $.table.serialNumber(count),
                    startTime: "",

                    endTime: "",

                    zy: "",

                    xx: "",

                    createTime: "",

                    createBy: "",

                    updateTime: "",

                    updateBy: "",

                }
            });
        }
    </script>
</body>
</html>